<template>
  <view class="detail-page">
    <!-- 加载状态 -->
    <view class="loading" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 活动详情内容 -->
    <view v-else-if="eventInfo.id">
      <!-- 活动标题和基本信息 -->
      <view class="header-section">
        <view class="event-title">{{ eventInfo.name }}</view>
        <view class="event-info">
          <view class="info-item">展会地点: {{ eventInfo.location }}</view>
          <view class="info-item">展会时间: {{ formatDateRange(eventInfo.startTime, eventInfo.endTime) }}</view>
          <view class="info-item" v-if="eventInfo.visitCount">浏览次数: {{ eventInfo.visitCount }}</view>
        </view>
      </view>

      <!-- 展会横幅区域 -->
      <view class="banner-section">
        <view class="banner-container">
          <image 
            v-if="eventInfo.coverImage" 
            :src="eventInfo.coverImage" 
            class="banner-image" 
            mode="aspectFit"
            @error="handleImageError"
          />
          <view v-else class="banner-placeholder">
            <view class="banner-title">{{ eventInfo.name || '展会' }}</view>
            <view class="banner-subtitle">专业展会 · 行业盛会</view>
          </view>
        </view>
      </view>

      <!-- 展会视频 -->
      <view class="video-section" v-if="eventInfo.videoUrl">
        <view class="section-title">展会视频</view>
        <view class="video-container">
          <video 
            :src="eventInfo.videoUrl" 
            class="exhibition-video"
            controls
            poster=""
            @error="handleVideoError"
          ></video>
        </view>
      </view>

      <!-- 展会介绍 -->
      <view class="content-section" v-if="eventInfo.content">
        <view class="section-title">{{ eventInfo.name }}展会介绍</view>
        <view class="content-text">
          <!-- 使用rich-text组件支持富文本内容 -->
          <rich-text :nodes="eventInfo.content"></rich-text>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else-if="!loading">
      <text class="empty-text">展会信息不存在</text>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <view class="action-btn primary" @click="registerEvent">
        立即报名
      </view>
    </view>
  </view>
</template>

<script>
import { getExhibitionDetail } from '@/api/api.js'

export default {
  name: 'ActivityDetail',
  data() {
    return {
      eventId: '',
      eventInfo: {},
      loading: false
    }
  },
  onLoad(options) {
    if (options.id) {
      this.eventId = options.id
      this.loadEventDetail()
    }
    uni.setNavigationBarTitle({
      title: '活动详情'
    })
  },
  methods: {
    async loadEventDetail() {
      if (!this.eventId) {
        uni.showToast({
          title: '展会ID不能为空',
          icon: 'none'
        })
        return
      }

      this.loading = true
      try {
        const response = await getExhibitionDetail(this.eventId)
        
        if (response.code === 200) {
          this.eventInfo = response.data
          
          // 设置页面标题为展会名称
          uni.setNavigationBarTitle({
            title: this.eventInfo.name || '活动详情'
          })
        } else {
          console.error('API返回错误:', response)
          uni.showToast({
            title: response.message || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载展会详情失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    // 格式化日期范围
    formatDateRange(startTime, endTime) {
      if (!startTime || !endTime) return ''
      
      const start = new Date(startTime)
      const end = new Date(endTime)
      
      const startStr = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, '0')}-${String(start.getDate()).padStart(2, '0')}`
      const endStr = `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, '0')}-${String(end.getDate()).padStart(2, '0')}`
      
      return `${startStr} 至 ${endStr}`
    },

    // 处理图片加载错误
    handleImageError(e) {
      // 设置默认图片
      e.target.src = '/static/images/default-exhibition.jpg'
      // 如果默认图片也加载失败，显示占位符
      e.target.onerror = function() {
        e.target.style.display = 'none'
      }
    },

    // 处理视频加载错误
    handleVideoError(e) {
      uni.showToast({
        title: '视频加载失败',
        icon: 'none'
      })
    },

    registerEvent() {
      uni.showToast({
        title: '报名功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.detail-page {
  background-color: #FFFFFF;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 头部区域 */
.header-section {
  padding: 40rpx 32rpx 40rpx;
  text-align: center;
  background: #ffffff;
}

.event-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  line-height: 1.5;
  margin-bottom: 32rpx;
  text-align: center;
}

.event-info {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  align-items: left;
}

.info-item {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.4;
  text-align: left;
}

/* 展会横幅区域 */
.banner-section {
  padding: 0 32rpx 40rpx;
}

.banner-container {
  width: 100%;
  height: 300rpx;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background-color: #f5f5f5;
}

.banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.banner-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.banner-title {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  margin-bottom: 12rpx;
  z-index: 1;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.banner-subtitle {
  font-size: 24rpx;
  color: #b8c5d1;
  text-align: center;
  z-index: 1;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

/* 视频区域 */
.video-section {
  padding: 0 32rpx 32rpx;
}

.video-container {
  margin-top: 24rpx;
}

.exhibition-video {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
  background-color: #000;
}

/* 内容区域 */
.content-section {
  padding: 0 32rpx 40rpx;
  background: #ffffff;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 24rpx;
  line-height: 1.4;
}

.content-text {
  line-height: 1.8;
  width: 100%;
  overflow: hidden;
}

.content-text /deep/ p {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 24rpx;
  text-align: left;
  line-height: 1.8;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.content-text /deep/ p:last-child {
  margin-bottom: 0;
}

/* 富文本内容中的图片、视频、表格等元素自适应 */
.content-text /deep/ img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16rpx 0;
}

.content-text /deep/ video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16rpx 0;
}

.content-text /deep/ table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
  margin: 16rpx 0;
  border-collapse: collapse;
}

.content-text /deep/ table td,
.content-text /deep/ table th {
  padding: 8rpx 12rpx;
  border: 1rpx solid #ddd;
  font-size: 24rpx;
}

.content-text /deep/ iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16rpx 0;
}

/* 底部操作按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  padding: 20rpx 32rpx;
  border-top: 1rpx solid #F0F0F0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.action-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: linear-gradient(135deg, #007B8C 0%, #4CAF50 100%);
  color: #FFFFFF;
}

.action-btn.primary:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* 加载状态 */
.loading {
  padding: 80rpx 32rpx;
  text-align: center;
}

.loading-text {
  font-size: 28rpx;
  color: #666666;
}

/* 空状态 */
.empty-state {
  padding: 80rpx 32rpx;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>